<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="Component" content="width=device-width, initial-scale=1.0">
    <title> The Tear </title>

    <!-- 网页标签 -->
    <!-- <link rel="icon" href="./img/Main/htmlIcon.svg"> -->

    <!-- 字体链接 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">

</head>


<body>

<div class="main">
    <!-- 头部 -->
    <section class="Head">
        <!-- 头组件 -->
        <div class="headOver">
            <div class="back">
                <span> Device Control </span>
            </div>
        </div>
    </section>

    <!-- 页面列表 -->
    <section class="PageWindow">
        <!-- 垫块 -->
        <div class="cushionUp"></div>

        <div class="pageList">

            <!-- 首页 -->
            <div class="pageBox" id="page_0">

                <div class="cushion cushionA"></div>

                <!-- 子标题组件 -->
                <div class="subtitle">
                    <span id="dateText"> TimeText </span>
                </div>

                <div class="cushion cushionA"></div>

                <div class="messageClassifier"></div>

                <div class="cushion cushionB"></div>

                <!-- 子标题组件 -->
                <div class="subtitle">
                    <span> All Message </span>
                </div>

                <div class="cushion cushionC"></div>

                <!-- 信息块窗口组件 -->
                <div class="messageWindow" style="flex-grow: 1;"></div>

            </div>

            <!-- 日历 -->
            <div class="pageBox" id="page_1">

            </div>

            <!-- 控制 -->
            <div class="pageBox" id="page_2">

                <div class="cushion cushionA"></div>

                <!-- 数据盘组件 -->
                <div class="dataPlate">
                    <span class="progress">
                    <span class="plate" dataFoo='250.0 Hz'>
                    </span>
                    </span>

                    <div class="dataPlateInputRangeSpace"></div>

                    <!-- 滑块组件 -->
                    <div class="inputRange">
                        <label for="range">
                            <input type="range" id="range">
                            <span class="track"> <span class="cover"></span> </span>
                        </label>
                    </div>
                </div>

                <div class="cushion cushionB"></div>

                <!-- 子标题组件 -->
                <div class="subtitle">
                    <span> Device Setup </span>
                </div>

                <!-- 功能块组件 -->
                <div class="bluetoothLinkFuncBlock"></div>

                <!-- 功能块组件 -->
                <div class="bluetoothClockFuncBlock"></div>

                <div class="cushion cushionC"></div>
                <div class="cushion cushionC"></div>

            </div>

            <!-- 个人 -->
            <div class="pageBox" id="page_3">

            </div>
        </div>

    </section>

    <!-- 导航 -->
    <section class="Guide">
        <!-- 导航栏组件 -->
        <div class="guide">
            <div class="back">
            <nav> <ul>
                <div class="slider"></div>
                <li><a href="#" id="guideA1"></a></li>
                <li><a href="#" id="guideA2"></a></li>
                <li><a href="#" id="guideA3"></a></li>
                <li><a href="#" id="guideA4"></a></li>
            </ul></nav>
            </div>
        </div>
    </section>

</div>

</body>

<!-- 主控 -->
<script src="./index.js" type="module"></script>

</html>